<template>
  <div class="home">
    <div class="flex-box">
      <div>
        <div class="flex-box" style="margin-bottom: var(--gap-M);">
          <div class="title-box">
            <img class="img" alt="Vue logo" src="../assets/logo.png">
            <div class="align-self">
              <p class="title">{{ title }}</p>
              <p class="msg">{{ msg }}</p>
            </div>
          </div>
        </div>
        <div class="flex-box">
          <el-card v-for="(item,index) in cards" :key="index + 'cards'" style="flex-grow: 1;" shadow="hover">
            <template #header>
              <i :class="item.icon"/>
              <span class="font-bold" style="padding-left: var(--padding-S);">{{ item.title }}</span>
            </template>
            <span>当前分类总记录数：{{ item.content }}</span>
          </el-card>
        </div>
      </div>
      <el-card class="align-self" style="min-width: 300px;max-width: 300px;" shadow="hover">
        <template #header>
          <div class="flex-box" style="justify-content: space-between;">
            <div>
              <i class="el-icon-data-line"/>
              <span class="font-bold" style="padding-left: var(--padding-S);">快捷入口</span>
            </div>
            <el-link :underline="false" type="primary">查看更多</el-link>
          </div>
        </template>
        <div class="flex-box" style="flex-wrap: wrap;">
          <div v-for="(item, index) in quickBtnList" :key="index + 'quickBtnList'" class="quickBtn"
               @click="$router.push(item.path)">
            <icon :icon="item.icon"/>
            <div class="path-text">{{ item.text }}</div>
          </div>
          <div class="quickBtn">
            <icon icon="el-icon-plus"/>
            <div class="path-text">新增</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="flex-box">
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'HomeView',
  data() {
    return {
      msg: 'Welcome to My Vue App -- vue2-template，一个开箱即用的模板，提供全局配置、页面缓存、刷新、ui组件简易封装等后台管理系统常用的基础功能，技术栈：vue2 + vuex + elementUi + axios，欢迎使用和提出意见，感谢您的支持！',
      timeMap: [
        {max: 2, text: '凌晨', msg: '修仙大能也是要睡觉滴~'},
        {max: 4, text: '黎明', msg: 'man！你也想看看凌晨4点的纽约街头吗~'},
        {max: 6, text: '拂晓', msg: '快去休息吧，还没到上班的时候呢~'},
        {max: 8, text: '清晨', msg: '一日之计在于晨，吃了吗您嘞~'},
        {max: 10, text: '早晨', msg: '早晨8 9 点钟的太阳你好呀~'},
        {max: 12, text: '早上', msg: '干饭人准备出发，冲冲冲~'},
        {max: 14, text: '中午', msg: '午休时间禁止内卷，达咩达咩哟~'},
        {max: 16, text: '下午', msg: '下午茶时间到，饮茶先啦~'},
        {max: 18, text: '黄昏', msg: '你的干饭之魂在燃烧了吗~'},
        {max: 20, text: '傍晚', msg: '饭后走一走，活到九十九~'},
        {max: 22, text: '晚上', msg: '早睡早起方能养生~'},
        {max: 24, text: '午夜', msg: '该去休息啦，你想修仙吗~'}
      ],
      currentHour: new Date().getHours(),
      timer: null,
      cards: [
        {title: '用户统计', content: '1254', icon: 'el-icon-user'},
        {title: '商品统计', content: '5443', icon: 'el-icon-goods'},
        {title: '浏览统计', content: '53477', icon: 'el-icon-search'},
        {title: '订单统计', content: '972', icon: 'el-icon-phone-outline'},
      ],
      quickBtnList: [
        // {icon: 'el-icon-s-order', text: '订单管理', path: '/mall/order'},
        // {icon: 'el-icon-s-goods', text: '商品管理', path: '/mall/goods'},
        // {icon: 'el-icon-postcard', text: '优惠券管理', path: '/mall/coupon'},
        {icon: 'el-icon-user', text: '用户管理', path: '/system/user'},
        // {icon: 'el-icon-s-flag', text: '角色管理', path: '/system/role'},
        {icon: 'el-icon-s-check', text: '天擎接口', path: '/skyList'},
      ]
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    title() {
      for (let i = 0; i < this.timeMap.length; i++) {
        if (this.currentHour < this.timeMap[i].max) {
          return `亲爱的${this.userInfo.name}，${this.timeMap[i].text}${this.currentHour}点了，${this.timeMap[i].msg}`;
        }
      }
    }
  },
  created() {
    // 设置定时器，每分钟更新一次 currentHour
    this.timer = setInterval(this.updateCurrentHour, 60000);
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer);
  },
  methods: {
    updateCurrentHour() {
      this.currentHour = new Date().getHours();
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: var(--gap-M);
  padding: var(--padding-M);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.flex-box {
  display: flex;
  align-items: center;
  gap: var(--gap-M);
}

.title-box {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: var(--gap-M);
  padding: var(--padding-M);
  background-color: #e1eaf9;
  border-radius: .5rem;
}

.img {
  width: 120px;
}

.title {
  font-size: 2rem;
  line-height: 3rem;
  color: #95ace8;
}

.msg {
  text-indent: 2em;
  font-style: italic;
  line-height: 1.2rem;
}

.align-self {
  align-self: stretch;
}

.font-bold {
  font-weight: bold;
}

.quickBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-S);
  box-sizing: border-box;
  width: 78px;
  aspect-ratio: 16 / 9;
  padding: var(--padding-S);
  border-radius: .5rem;
  border: 1px solid #e1eaf9;
  background-color: #ecf5ff;
  cursor: pointer;
  transition: .3s;
}

.quickBtn > i {
  transition: .3s;
}

.quickBtn:hover {
  transform: translateY(-2px);
  background-color: #66b1ff;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

.quickBtn:hover > i {
  color: #fff;
}

.path-text {
  font-size: 12px;
}
</style>
